<template id="js-table-tool-bar">
    <div class="app-table-action-button">
        <el-button-group>
            <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
                <el-button size="small" icon="el-icon-search" @click="toggleSearch()" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                <el-button size="small" icon="el-icon-refresh" @click="refresh()" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns.length > 0">
                <el-button size="small" icon="el-icon-menu" @click="showColumn()" />
            </el-tooltip>
        </el-button-group>
        <el-dialog :title="title" :visible.sync="open" append-to-body>
            <el-transfer :titles="['显示', '隐藏']" v-model="value" :data="columns"></el-transfer>
        </el-dialog>
    </div>
</template>
<script>
    Vue.component('app.table-tool-bar', {
        template: document.getElementById('js-table-tool-bar').innerHTML,
        data() {
            return {
                // 显隐数据
                value: [],
                // 弹出层标题
                title: '显示/隐藏',
                // 是否显示弹出层
                open: false,
            }
        },
        props: {
            showSearch: {
                type: Boolean,
                default: true,
            },
            columns: {
                type: Array,
                default: [],
            },
        },
        created() {
            // 显隐列初始默认隐藏列
            for (let item in this.columns) {
                if (this.columns[item].visible === false) {
                    this.value.push(parseInt(item))
                }
            }
        },
        methods: {
            // 搜索
            toggleSearch() {
                this.$emit('update:showSearch', !this.showSearch)
            },
            // 刷新
            refresh() {
                this.$emit('query-table')
            },
            // 右侧列表元素变化
            dataChange(data) {
                for (let item in this.columns) {
                    const key = this.columns[item].key
                    this.columns[item].visible = !data.includes(key)
                }
            },
            // 打开显隐列dialog
            showColumn() {
                this.open = true
            },
        },
    })
</script>

